<template>
  <el-dialog
      title=""
      :visible.sync="visible"
      width="60%"
      center
      :close-on-click-modal="false"
  >
    <div class="FormsDiv">
      <el-form :model="From" :rules="ruleArticleTypes" ref="From" label-width="120px" class="demo-ruleForm">
        <el-form-item label="类型名称" prop="article_type_name">
          <el-input v-model="From.article_type_name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="功能描述" prop="article_type_description">
          <el-input  type="textarea"  v-model="From.article_type_description"  placeholder="请输入描述" maxlength="255" show-word-limit></el-input>
        </el-form-item>
        <el-form-item>
          <el-radio v-model="From.is_delete" :label="0" border>激活</el-radio>
          <el-radio v-model="From.is_delete" :label="1" border>禁用</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('articleTypesFrom')">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>



</template>

<script>
import {getArticleTypeNameRule} from "@/utils/validateFrom";
import { articleTypesSave } from "@/api/api";

export default {
  props:{
    visibleChild: {
      type:Boolean,
      default:false
    },
    childFrom:{
      type:Object,
      default(){
        return {
          article_type_id:-1,
          article_type_name:'',
          article_type_description:'',
          is_delete:0
        };
      }
    },
    articleTypeId:{
      type:Number,
      default() {
        return -1;
      }
    }
  },
  data(){
    return {
      From:JSON.parse(JSON.stringify(this.childFrom)),
      article_type_id:this.articleTypeId,
      ruleArticleTypes:{
        article_type_name: [{ validator: getArticleTypeNameRule,min:4,max:16,required: true,trigger: 'blur',articleTypeId:this.article_type_id}],
        article_type_description: [{required: true,trigger: 'blur',message:'描述必填'}],
      },
    }
  },
  watch:{
    // 这样才能算得上动态监控,不然初始渲染的就会一直保留
    childFrom:{
      // 监听数据发生变化的处理函数
      handler(newValue) {
        console.log("JSON.parse(JSON.stringify(newValue)",JSON.parse(JSON.stringify(newValue)));
        this.From = JSON.parse(JSON.stringify(newValue));//将监听到修改的值赋予到dataAttrs中
      },
      // 是否开启深度监听，由于我们上面props中是一个Object对象，所以需要开启深度监听功能
      deep: true
    },
    articleTypeId:{
      // 监听数据发生变化的处理函数
      handler(newValue) {
        this.article_type_id = newValue;
        this.ruleArticleTypes.article_type_name["0"].articleTypeId = newValue;
        console.log(" this.ruleLabels", this.ruleArticleTypes);
      },
      // 是否开启深度监听，由于我们上面props中是一个Object对象，所以需要开启深度监听功能
      deep: true
    },
  },
  computed:{
    visible:{
      get(){
        return this.visibleChild;
      },
      set(newValue){
        this.$emit("update:visibleChild",newValue);
      }
    }
  },
  methods: {
    submitForm(){
      console.log("111");
      this.$refs.From.validate((validate)=>{
        console.log("validate",validate);
        if (validate){
          articleTypesSave(this.From).then((res) =>{
            if (res.code === 200){
              // 重置初始界面
              this.From = {
                article_type_id : -1,
                article_type_name:'',
                article_type_description:'',
                is_delete:0
              };
              this.$parent.articleTypes([],this.$parent.queryInfo.page,this.$parent.queryInfo.pageSize);
              this.$message.success('保存成功');
            }
          }).catch(error =>{
            this.$message.error(error.message || 'Error');
          })
        }else {
          this.$message.error('错误');
        }
      })
      //关闭弹窗
      this.visible = false;
    },
  }
}
</script>

